<template>
  <base-breadcrumb :breadcrumb="!id">
    <div class="about-master-container" v-loading="loading">
      <a-card>
        <title-name title="安全检查"></title-name>

        <div class="title" :class="form.safetyAuditStatusEnum">
          <div class="status">
            <span v-if="form.safetyAuditStatusEnumStr === '待整改' && form.isBeyond == '1'">超期未整改</span>
            <span v-else>{{ form.safetyAuditStatusEnumStr }}</span>
          </div>
          <div class="type">
            <span class="name">{{ form.treeLabelName }}</span>
            <div class="tag">{{ form.securityControlEnumStr }}</div>
          </div>
        </div>

        <BForm
          :config="formConfig"
          :form="form"
          :rule="rules"
        />
      </a-card>
      <a-card>
        <title-name title="整改通知"></title-name>
        <BForm
          :config="form2Config"
          :form="form"
          :rule="rules"
        />

        <a-tabs default-active-key="1" style="padding: 0 40px;">
          <a-tab-pane key="1" tab="流程进度" v-if="form.safetyAuditStatusEnum !== 'QUALIFIED' &&
           form.safetyAuditStatusEnum !== 'UNQUALIFED'"
          >
            <a-steps direction="vertical">
              <a-step 
                v-for="item in processList"
                :key="item.id"
                :title="item.userName"
                :sub-title="item.userDes"
                :description="item.userTime"
              />
            </a-steps>
          </a-tab-pane>
          <a-tab-pane key="2" tab="整改信息" v-if="form.safetyAuditStatusEnum === 'REVIEW' ||
           form.safetyAuditStatusEnum === 'REVIEWPAST'||
           form.safetyAuditStatusEnum === 'REVIEWNOPAST'"
          >
            <div class="list">
              <div class="item" v-for="(item,index) in form.rectificationContentVOS">
                <div class="l-title">第{{ index + 1 }}次整改</div>
                <div class="l-row">
                  <div class="left">
                    处理情况：{{ item.rectificationDescribe }}
                  </div>
                  <div class="right">
                    复查意见：{{ item.reviewResult ? item.reviewResult == '1' ? '通过' : '不通过' : '' }}
                  </div>
                </div>
                <div class="l-row">
                  <div class="left">
                    整改人：{{ item.rectificationUserName }}
                  </div>
                  <div class="right">
                    复查人：{{ item.reviewUserName }}
                  </div>
                </div>
                <div class="l-row">
                  <div class="left">
                    整改时间：{{ item.rectificationTime }}
                  </div>
                  <div class="right">
                    复查时间：{{ item.reviewTime }}
                    <span style="margin-left: 60px;">整改时限：{{ item.rectification }}</span>
                  </div>
                </div>
                <div class="l-row">
                  <div class="left">
                    整改照片/视频：
                    <b-upload uploadType="image-list" businessCode="UN02"
                              :fileList.sync="item.rectificationImageFileInfoVO"
                              :disabled="true"
                    />
                  </div>
                  <div class="right">
                    复查照片/视频：
                    <b-upload uploadType="image-list" businessCode="UN02" :fileList.sync="item.reviewImageFileInfoVO"
                              :disabled="true"
                    />
                  </div>
                </div>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="检查照片">
            <b-upload uploadType="image-list" businessCode="UN02" :fileList.sync="form.imageFileInfo"
                      :disabled="true"
            />
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <div class="tar page-btn-right-top" v-if="!id">
        <a-button v-checkVisibleInDetail @click="$close">关闭</a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>
<script>

import LApi from '@/api/safetySupervision/checkAndRectify/checkRecord'

export default {
  name: 'detail',
  components: {},
  data() {
    return {
      loading: false,
      form: {
        isQualified: 0,
        inspectionRectificationUnqualifiedVOS: {},
        check: {
          rectificationUserName: '无',
          rectificationTime: '无',
          rectificationContent: '无',
          sendUserNames: '无'
        }
      },
      rules: {},
      processList: {}
    }
  },
  props: {
    // 业务id
    id: {
      type: [String, Number],
      default: ()=> void 0
    }
  },
  computed: {
    formConfig() {
      return [
        {
          row: true,
          children: [
            { type: 'input', value: 'typeName', label: '检查类型', attrs: { disabled: true } },
            { type: 'input', value: 'constructionPhaseName', label: '施工阶段', attrs: { disabled: true } },
            { type: 'input', value: 'treeLabelName', label: '隐患类型', attrs: { disabled: true } },
            { type: 'input', value: 'checkDescribe', label: '具体部位', attrs: { disabled: true } },
            { type: 'input', value: 'dangerProject', label: '是否危大工程', attrs: { disabled: true } },
            { type: 'input', value: 'respAreaName', label: '检查区域', attrs: { disabled: true } },
            { type: 'input', value: 'subcontractorName', label: '分包单位', attrs: { disabled: true } },
            { type: 'input', value: 'creatorName', label: '检查人', attrs: { disabled: true } }
          ]
        }]
    },
    form2Config() {
      return [
        {
          row: true,
          children: [
            //todo下面都没得
            {
              type: 'input',
              value: 'check.rectificationUserName',
              label: '整改人',
              attrs: { disabled: true }
            },
            {
              type: 'input',
              value: 'check.rectificationTime',
              label: '整改时限',
              attrs: { disabled: true }
            },
            {
              type: 'textarea',
              value: 'check.rectificationContent',
              label: '整改要求',
              attrs: { disabled: true },
              colSpan: 24,
              noFixed: true
            },
            {
              type: 'text',
              value: 'check.sendUserNames',
              label: '通知人',
              attrs: { disabled: true },
              colSpan: 24
            }
          ]
        }]
    }
  },
  watch: {},
  created() {
    if(this.id) {
      this.form.id = this.id
      this.getData()
    } else if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.getData()
    }
  },
  activated() {
    if(this.id){
      if(this.id !== this.form.id) {
        this.form.id = this.id
        this.getData()
      }
    } else if ( this.$route.query.id && this.$route.query.id !== this.form.id) {
      this.form.id = this.$route.query.id
      this.getData()
    }
  },
  methods: {
    async getData() {
      this.loading = true
      let res = await LApi.findById({ id: this.form.id })
      if (res.code === this.SUCCESS_CODE) {
        this.form = this.$assign(this.form, res.data)
        this.form.dangerProject = this.form.dangerProject == 1 ? '是' : '否'
        if (this.form.inspectionRectificationUnqualifiedVOS && this.form.inspectionRectificationUnqualifiedVOS.length) {
          this.form.check = this.form.inspectionRectificationUnqualifiedVOS[0]
          if (!this.form.check.rectificationUserName) this.form.check.rectificationUserName = '无'
          if (!this.form.check.rectificationTime) this.form.check.rectificationTime = '无'
          if (!this.form.check.rectificationContent) this.form.check.rectificationContent = '无'
          if (!this.form.check.sendUserNames) this.form.check.sendUserNames = '无'
        }

        // this.$console(this.form)

        //合格和不合格不整改
        if (this.form.safetyAuditStatusEnum !== 'QUALIFIED' && this.form.safetyAuditStatusEnum !== 'UNQUALIFED') {
          let res2 = await LApi.findProcessById({ id: this.form.id })
          if (res2.code === this.SUCCESS_CODE) {
            this.processList = res2.data
          }
        }
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  margin-bottom: 20px;
  padding-left: 80px;

  //合格
  &.QUALIFIED {
    .status {
      color: rgb(75, 121, 2);
    }

    .tag {
      background: rgb(115, 209, 61) !important;
    }
  }

  //待整改
  &.RECTIFICATION {
    .status {
      color: rgb(245, 154, 35);
    }
  }

  //待复查
  &.REVIEW {
    .status {
      color: rgb(236, 86, 98);
    }
  }

  //复查通过
  &.REVIEWPAST {
    .status {
      color: rgb(68, 201, 172);
    }
  }

  //不合格不整改
  &.UNQUALIFED {
    .status {
      color: rgb(236, 128, 141);
    }
  }

  .status {
    font-size: 30px;
    font-weight: bold;
  }

  .type {
    display: flex;
    align-items: center;
    //justify-content: center;
    .name {
      font-size: 20px;
      font-weight: bold;
    }

    .tag {
      margin-left: 6px;
      font-size: 12px;
      background: rgb(250, 205, 145);
      padding: 2px 6px;
      border-radius: 4px;
      color: white;
    }
  }
}

.list {
  color: black;
  font-size: 14px;

  .item {
    margin-bottom: 20px;

    .l-title {
      font-size: 18px;
      font-weight: bold;
    }

    .l-row {
      margin: 10px 0;
      display: flex;

      & > div {
        width: 45%;
        margin-right: 4%;
      }
    }

  }
}

/deep/ .ant-steps-item-wait .ant-steps-item-icon {
  background: #1890ff !important;
  border-color: #1890ff !important;
  color: white !important;
}

/deep/ .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon {
  color: white !important;
}

/deep/ .ant-steps-item-wait > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title {
  color: black;
}

/deep/ .ant-steps-item-subtitle {
  color: black !important;
  font-size: 12px;
}

/deep/ .ant-steps-item-description {
  color: black !important;
}
</style>